<template>
  <div class="lor">
    <div class="content">
      <v-card class="card">
        <v-card-title class="text-center justify-center py-6">
          <h1 class="font-weight-bold text-h2 basil--text">
            登录&注册
          </h1>
        </v-card-title>

        <v-tabs
            v-model="tab"
            grow
        >
          <v-tab
              v-for="item in items"
              :key="item"
          >
            {{ item }}
          </v-tab>
        </v-tabs>

        <v-tabs-items v-model="tab" background-color="transparent">
          <v-tab-item>
              <v-card-text><SignIn /></v-card-text>
          </v-tab-item>
          <v-tab-item>
            <v-card-text><SignUp /></v-card-text>
          </v-tab-item>
        </v-tabs-items>

      </v-card>
    </div>
    <div  class="banner">
      <v-img :src="url"></v-img>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import SignIn from "./SignIn/SignIn.vue";
import SignUp from "./SignUp/SignUp.vue";
import {getShow,getShowAns} from '@/api/pic'
export default Vue.extend({
  name: "LoginOrReg",
  components: {
    SignIn,
    SignUp
  },
  data: () => ({
    tab: null,
    items: ['登录', '注册'],
    url: ''
  }),
  mounted(){
    getShow().then(res => {
      const {code,url} = res as unknown as getShowAns
      if(code === 200){
        this.url = url
      }
    })
  }
})
</script>

<style lang="scss">
.lor {
  .content {
    margin: 2vh 0;
  }
  .card {
    background-color: transparent !important;
  }
  .banner {
    border-radius: 5px;
    overflow: hidden;
  }
  .v-card__text {
    background-color: transparent !important;
  }
  .v-tabs-items {
    background-color: transparent !important;
  }
  .v-tabs-bar {
    background-color: transparent !important;
  }
}
</style>